<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>底部导航</title>
    <link rel="stylesheet" type="text/css" href="./css/api.css"/>
    <link rel="stylesheet" type="text/css" href="./css/style.css"/>
    <link rel="stylesheet" type="text/css" href="./css/yzl.css">

    <style>
        .header {
            display: none;
        }

        .active {
            display: block;
            border: none;
        }
        .aui-badge {
    display: inline-block;
    width: auto;
    text-align: center;
    min-width: 0.8rem;
    height: 0.8rem;
    line-height: 0.8rem;
    padding: 0 0.2rem;
    font-size: 0.6rem;
    color: #ffffff;
    background-color: #ff2600;
    border-radius: 0.4rem;
    position: absolute;
    top: 0.2rem;
    left: 60%;
    z-index: 99;
}
    </style>

</head>
<body>
<div id="wrap" class="flex-wrap flex-vertical" v-cloak>
    <div id="headers">
        <div class="header active">
			  <span class="title" style="color:black;padding-left:46px;"><img v-src="'image/1_logo_zhadui_1.png'" width="40px" style="margin-top:15px"></span>
        <img  class="user-header-icon" style="float:right"
          v-src="'image/1_jia_1.png'"   v-myclick="show_add">
        </div>
        <div class="header">
            <span class="title" style="color:black;padding-left:46px;">联系人</span>
            <img  class="user-header-icon" style="float:right"
              v-src="'image/1_jia_1.png'"   v-myclick="show_add1">
        </div>
        <div  class="header" style="background:#BCE6FC">
				<!-- <span class="title" style="color:black">牧场</span> -->
        </div>
        <div class="header" >
          <!-- <span class="title" style="position:absolute;left:10px;font-size:14px;" v-myclick="backapp">返回扎堆</span> -->
          <img  class="user-header-icon" style="position:absolute;left:10px"
            v-src="'image/back_1.png'" tapmode v-show='!pageindex' v-myclick="webback">
            <span class="title" style="color:black">商城</span>
        </div>
        <div class="header" >
            <span class="title" style="color:black">我的</span>
        </div>
    </div>

    <div id="main" class="flex-con">

    </div>
    <div id="footer" class="footer border-t">
        <ul class="flex-wrap">
            <li style="position:relative" tapmode="hover" onclick="randomSwitchBtn( 0 );" class="flex-con active" :class="BSImg">
              消息
              <span class="aui-badge" v-show="unReadMsgCount>0"  style="color:#ffffff;position:absolute;top:-2px">{{unReadMsgCount}}</span>
            </li>
            <li tapmode="hover" style="position:relative" onclick="randomSwitchBtn( 1 );" class="flex-con" :class="BSImg">
              联系人
              <!-- <span style="color:#FF504D;position:absolute;top:-65px;font-size:80px">.</span> -->

            </li>
            <li tapmode="hover" onclick="randomSwitchBtn( 2 );" class="flex-con" :class="BSImg">牧场</li>
            <li tapmode="hover" onclick="randomSwitchBtn( 3 );" class="flex-con" :class="BSImg">商城</li>
            <li tapmode="hover" onclick="randomSwitchBtn( 4 );" class="flex-con" :class="BSImg">我的</li>
        </ul>
    </div>
    <div class="modal-index-filter" style="top:0px; " :class="selectModal"  v-cloak>
</div>
</div>
</body>
</html>
<script src="script/api.js"></script>
<script src="script/vue.js"></script>
<script src="script/app.js"></script>
<script src="script/common.js"></script>
<script src="script/url.js"></script>
<script>
    var vm;
    var analyzeIndex;
    var pageName;
    var isOpen = false;
    var frameNames = ['消息', '联系人', '牧场','商城','我的'];
    var switch_index = 2;
    apiready = function () {
      // reqPermission(['storage','camera','location','microphone']);
        setBSImg();
        MNActionButton = api.require('PIActionButton');
        FNScanner  = api.require('FNScanner');
	      rong = api.require('rongCloud2');
        wx = api.require('wx');
        qq = api.require('QQPlus');
	    	startrong();
        initApp();
        if (api.pageParam && api.pageParam.to) {
            funIniGroup(api.pageParam.to);
        } else {
            funIniGroup(2);
        }
        $api.fixTabBar($api.byId('footer'));
        addListeners();
        doubleBack();
        api.parseTapmode();
    };

    	function startrong(){
    	if(!getPrefs('imtoken')){
    	openWin('html/login/login');
    	}

			rong.init(function(ret, err) {

				if (ret.status == 'success') {
					//消息监听
					jt();
          console.log(getPrefs('imtoken'));
					rong.connect({
						token : getPrefs('imtoken')
					}, function(ret, err) {
            console.log(JSON.stringify(ret));
					});
				} else {
					api.toast({
						msg : '服务器连接失败'
					});
				}
			});}

			function jt(){
						rong.setOnReceiveMessageListener(function(ret, err) {
				if (ret) {

					api.sendEvent({
						name : 'hhxx',
						extra : {
							msg : ret.result.message
						}
					});
					api.sendEvent({
						name : 'new_msg',
						extra : {
							msg : ret.result.message
						}
					})
          getunReadMsgCount();
          // vm.unReadMsgCount=1;
				}
			})}
      function getunReadMsgCount(){
        rong.getTotalUnreadCount(function(ret, err) {
          vm.unReadMsgCount = ret.result;
        // api.toast({ msg: ret.result });
      })
      }

    function initApp() {
        vm = new Vue({
            el: '#wrap',
            data: {
                BSImg: Vue.BSImg,
                show_state:true,
                show_state1:true,
                pageindex:true,
                showModal: false,
                unReadMsgCount: 0,
            },
            methods: {
              show_add:function () {
                api.sendEvent({
                  name : 'show_add',
                  extra : {
                    show_add : this.show_state
                  }
                });
                this.show_state = !this.show_state;
              },
              show_add1:function () {
                api.sendEvent({
                  name : 'show_add1',
                  extra : {
                    show_add : this.show_state1
                  }
                });
                this.show_state1 = !this.show_state1;
              },
              backapp:function(){
                api.sendEvent({
                    name: 'closeshop',
                });
                // funIniGroup(2);
              },
              webback:function(){
              api.sendEvent({
                  name: 'shopback',
                  extra: {
                  }
              });
            },

          },
          computed: {
              selectModal: function () {
                  return {
                      show: this.showModal,
                      hide: !this.showModal
                  }
              },
          },
        });
    }


    function funIniGroup(index) {
        var frames = [];
        frames.push({
            name: 'message',
            url: './html/home/message.html',
            bgColor: '#f7f4f2',
            bounces: true
        }, {
            name: 'book',
            url: './html/user/book.html',
            bgColor: '#f7f4f2',
            bounces: true
        }, {
            name: 'game',
            url: './html/game/pasture.html',
            bgColor: '#f7f4f2',
            bounces: false
        },{
            name: 'shop',
            url: './html/game/shop.html',
            bgColor: '#f7f4f2',
            bounces: false
        },{
            name: 'user',
            url: './html/user/user.html',
            bgColor: '#f7f4f2',
            bounces: true
        }
      );
        switchActiveCls(index);
        api.openFrameGroup({
            name: 'group',
            scrollEnabled: false,
            preload:0,
            rect: {
                x: 0,
                y: 60,
                w: api.winWidth,
                h: $api.dom('#main').offsetHeight-60
            },
            index: index,
            frames: frames
        }, function (ret) {
            indexOnPageStart();
            if (ret){
              // 切换frame的发事件通知相应的frame
              api.sendEvent({
                  name: 'switch_to_frame_' + ret.index,
                  extra: {
                      id: ret.index,
                  }
              });

            }
        });
    }


    // 随意切换按钮
    function randomSwitchBtn(index) {
      api.sendEvent({
        name : 'close_add',
      });
      switch_index = index;
      if (index == 0){
      vm.unReadMsgCount=0;
    };

        var eFootLis = $api.domAll('#footer li'),
            eHeaderLis = $api.domAll('#headers .header'),
            tag = eFootLis[index];
        if (tag == $api.dom('#footer li.active'))return;
        for (var i = 0, l = eFootLis.length; i < l; i++) {
            if (i == index) {
                $api.addCls(eFootLis[i], 'active');
                $api.addCls(eHeaderLis[i], 'active');
            } else {
                $api.removeCls(eFootLis[i], 'active');
                $api.removeCls(eHeaderLis[i], 'active');
            }

        }
        api.setFrameGroupIndex({
            name: 'group',
            index: index,
            // reload:true
        });
    }

    function switchActiveCls(index) {
        var eFootLis = $api.domAll('#footer li'),
            eHeaderLis = $api.domAll('#headers .header'),
            tag = eFootLis[index];
        if (tag == $api.dom('#footer li.active'))return;
        for (var i = 0, l = eFootLis.length; i < l; i++) {
            if (i == index) {
                $api.addCls(eFootLis[i], 'active');
                $api.addCls(eHeaderLis[i], 'active');
            } else {
                $api.removeCls(eFootLis[i], 'active');
                $api.removeCls(eHeaderLis[i], 'active');
            }
        }
    }

    function isWhichFrame() {
        var eFootLis = $api.domAll('#footer li');
        for (var i = 0, l = eFootLis.length; i < l; i++) {
            if ($api.hasCls(eFootLis[i], 'active')) {
                return i;
            }
        }
    }

    function indexOnPageStart() {
        var frameIndex = isWhichFrame();
        if (analyzeIndex >= 0) {
            if (analyzeIndex == frameIndex) {
                return;
            } else {
                indexOnPageEnd();
            }
        }
        analyzeIndex = frameIndex;
        pageName = frameNames[frameIndex];
        onPageStart(pageName);
    }

    function indexOnPageEnd() {
        if (analyzeIndex >= 0) {
            onPageEnd(pageName);
            analyzeIndex = -1;
        }
    }

    function addListeners() {
        api.addEventListener({
            name: 'getUnReadMsgCount'
        }, function (ret) {
            vm.unReadMsgCount = ret.value.count;
            api.setAppIconBadge({
                badge: ret.value.count
            });
        });


        api.addEventListener({
            name: 'viewappear'
        }, function () {
            indexOnPageStart();
            if (isOpen) {
                isOpen = false;
                var params = api.pageParam;
                if (params) {
                    if (params.startImg) {
                        openWin('html/home/browser', {url: params.startImg.url});
                    } else if (params.goods_id) {
                        openWin('html/home/browser', {goods_id: params.goods_id});
                    }
                }
            }
        });
        api.addEventListener({
            name: 'pageindex'
        }, function (ret) {
           vm.pageindex=ret.value.status;
        });
        api.addEventListener({
            name: 'webback'
        }, function (ret) {
           vm.pageindex=ret.value.status;
        });
        api.addEventListener({
            name: 'cancelModal'
        }, function () {
            vm.showModal = false;
        });

        api.addEventListener({
            name: 'showModal'
        }, function () {
          if(switch_index==2){
            vm.showModal = !vm.showModal;

          }
        });
        api.addEventListener({
            name: 'viewdisappear'
        }, function () {
            indexOnPageEnd();
        });
        api.addEventListener({
            name: 'closewebview'
        }, function () {
            // funIniGroup(0);
            window.location.reload();
        });
    }



</script>
